<script setup lang="ts" name="RaceLottery">
import API from "@/api";
import { userinfo } from "@/store";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
dayjs.extend(duration);

const { t } = useI18n();
const router = useRouter();
const route = useRoute();

const piniaUserinfo: any = userinfo();

const data: any = reactive({
  lotteryList: [],
  nowTime: "",
});

const { lotteryList, nowTime } = toRefs(data);

const headerTitle: any = computed(() => {
  return route?.query?.title || "赛马";
});

const initlotteryList = async (type: any) => {
  try {
    let res = await API.lotteryPrivateAPI({
      typeConfigCode: type,
    });
    if (res?.code === 200) {
      lotteryList.value = res.data.periods || [];
      nowTime.value = res.data.time;
    }
  } catch (error) {}
};
watch(
  () => route?.query?.type,
  (val) => {
    if (val) {
      initlotteryList(val);
    }
  },
  {
    immediate: true,
  }
);

const handleGoBet = (item: any) => {
  router.push({
    path: `/race/${item.planId}`,
    query: {
      planId: item.planId,
      id: item.id,
      typeConfigCode: item.typeConfigCode,
      bigCode: item.bigCode,
      title: headerTitle.value,
      period: item.period,
    },
  });
};
</script>

<template>
  <div class="raceLotteryPage">
    <DetailHeader :title="headerTitle" :isNeedBackIcon="true" />
    <div class="lotteryList">
      <div
        class="lotteryItem"
        v-for="(item, index) in lotteryList"
        :key="item.id"
        @click="handleGoBet(item)"
      >
        <div class="top">
          <div class="left">{{ item?.planName }}</div>
        </div>
        <div class="bottom">
          <div class="timeData">
            <div class="ticketNumber">
              <div class="text1">{{ item?.period }}</div>
            </div>
            <div class="money margin1">
              {{ dayjs(+item?.startTime).format("MM-DD HH:mm") }} -
              {{ dayjs(+item?.endTime).format("MM-DD HH:mm") }}
            </div>
          </div>
          <div class="middle"></div>
          <div class="right">
            <div class="deadLine margin1">
              <Iconfont name="icon-icon_shijian" color="#1E93FF" size="16" />
              {{ dayjs.duration(item?.endTime - nowTime).hours() }}
              {{ t("nagaland.test3") }}
              {{ dayjs.duration(item?.endTime - nowTime).minutes() }}
              {{ t("nagaland.test4") }}
              {{ dayjs.duration(item?.endTime - nowTime).seconds() }}
              {{ t("nagaland.test5") }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
